<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle" :labelWidth="110"></TopFilter>

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onRowSelectChange="selectChangeHandle"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button @click="closeDrawer">关 闭</el-button>
      <el-button type="primary" :disabled="isDisabled" @click="commitHandle">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryBill } from '@/api/omFinance/FinanceManage/LicenseBindingQuery';

export default {
  mixins: [dictionary],
  props: ['rowData'],
  data() {
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryBill,
      fetchParams: {},
      formData: {},
      billData: [],
      isDisabled: true
    };
  },
  mounted() {},
  methods: {
    changeHandle(params) {
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    selectChangeHandle(rows) {
      this.billData = [];
      if (rows.length > 0) {
        this.isDisabled = false;
        this.billData = rows;
        return;
      }
      this.isDisabled = true;
    },

    commitHandle() {
      if (this.billData) {
        this.closeDrawer(this.billData);
      }
    },

    closeDrawer(data) {
      this.$emit('close', false, data);
    },
    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode'
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'dealerName'
        },
        {
          type: 'INPUT',
          label: '三方票号',
          fieldName: 'billNoLike'
        }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '经销商简称',
          dataIndex: 'dealerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '资金类型',
          dataIndex: 'accountTypeName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '资金类型',
        //   dataIndex: 'accountType',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('6005'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.accountType, '6005')}</span>;
        //   }
        // },
        {
          title: '记账时间',
          dataIndex: 'createdAt',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '三方票号',
          dataIndex: 'billNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '票面金额',
          dataIndex: 'billAmount',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '已用金额',
          dataIndex: 'realAmount',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '可用金额',
          dataIndex: 'availableAmount',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '出票日期',
          dataIndex: 'billDate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '到期日期',
          dataIndex: 'expireDate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '启用标记',
          dataIndex: 'isDeleted',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            let str = '';
            if (props.row.isDeleted == 0) return (str = '启用');
            if (props.row.isDeleted == 1) return (str = '禁用');
            return <span>{str}</span>;
          }
        }
      ];
    }
  }
};
</script>
